<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div:nth-child(1){
				text-indent: 2em; /*缩进2字符*/
				text-shadow: 10px 10px 0px #0000FF;
							/*投影的坐标x y  模糊半径 影子的颜色*/
			}
			div:nth-child(2){
				text-align: right;
			}
			div:nth-child(3){
				text-decoration: line-through; /*underline*/
			}
			div:nth-child(4){
				text-transform: capitalize;/*首字母大写uppercase、lowercase*/ 
			}
			/* div:nth-child(4)~div */
			div:nth-child(n+5){
				width: 300px;
				border: #0000FF 1px solid; /*给div加边框*/
				
				white-space: nowrap;/*使中文显示在一行*/
				overflow: hidden;/*超出盒子的部分隐藏*/
				text-overflow: ellipsis;/*文本溢出的部分用...代替*/
			}
		</style>
	</head>
	<body>
		<div>这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字</div>
		<div>my name is zhangsan这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字这是文字这是文字这是文字</div>
		<div>这是文字这是文字这是文字这是文字这是文字这是文字</div>
	</body>
</html>
